<template>
  <base-search :title="t('keys.addressManagement')" :isShowSearch="1">
    <template #btn>
      <el-button type="primary" @click.stop="onNewAddress({}, 'add')">{{ t('keys.add_address') }}</el-button>
    </template>
  </base-search>
  <base-table ref="tableRefCom" v-loading="loading" border :row-style="{ cursor: 'pointer' }" :columns="columns" :data="list">
    <template #receiveFlag="{ row }">
      {{ row.defultReceiveFlag ? '收货地址' : '' }}
      {{ row.defultInvoiceFlag ? '、' : '' }}
      {{ row.defultInvoiceFlag ? '收票地址' : '' }}
    </template>
    <template #defultInvoiceFlag="{row}"> {{ row.defultInvoiceFlag ? t('keys.yes') : t('keys.no') }} </template>
    <template #defultReceiveFlag="{row}">
      {{ row.defultReceiveFlag ? t('keys.yes') : t('keys.no') }}
    </template>
    <template #action="scope">
      <el-button type="info" v-if="!scope.row.defultReceiveFlag" @click.stop="postAddressDefultReceive(scope.row)" link>{{
        t('keys.set_default_address')
      }}</el-button>
      <el-button type="info" @click.stop="onNewAddress(scope.row, 'edit')" link>{{ t('keys.edit') }}</el-button>
      <el-button type="danger" @click.stop="delAddress(scope.row)" link>{{ t('keys.delete') }}</el-button>
    </template>
  </base-table>
  <new-address
    v-if="drawerConfig.showAddressDrawer"
    :showAddressDrawer="drawerConfig.showAddressDrawer"
    :drawerInfo="drawerConfig.drawerInfo"
    @sonBtnCloseClick="sonBtnCloseClick"
  ></new-address>
</template>
<script setup>
import { ref, onMounted, reactive } from 'vue'
import { getAddressApi, postAddressdefultInvoiceApi, postAddressDefultReceiveApi, delAddressApi } from 'api/home'
import { ERR_OK } from 'config/statusCode'
import NewAddress from './components/newAddress.vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useI18n } from 'vue-i18n'
const { t } = useI18n() // 中英文
const list = ref([])
const drawerConfig = reactive({
  showAddressDrawer: false,
  drawerInfo: {
    title: t('keys.add_new_address'),
    row: {},
    type: 'add'
  }
})
const loading = ref(false)
const columns = ref([
  {
    field: 'contactsName',
    label: '联系人',
    showOverflowTooltip: true
  },
  {
    field: 'phone',
    label: '联系电话',
    showOverflowTooltip: true
  },
  {
    field: 'countryName',
    label: '国家',
    showOverflowTooltip: true
  },
  {
    field: 'addressName',
    label: '所在地区',
    showOverflowTooltip: true
  },
  {
    field: 'street',
    label: '详细地址',
    showOverflowTooltip: true
  },
  {
    field: 'receiveFlag',
    label: '地址使用范围',
    showOverflowTooltip: true
  },
  {
    field: 'defultReceiveFlag',
    label: '默认收货地址',
    showOverflowTooltip: true
  },
  {
    field: 'defultInvoiceFlag',
    label: '默认收票地址',
    showOverflowTooltip: true
  },
  {
    field: 'action',
    label: t('keys.operation'),
    width: '200px',
    fixed: 'right',
    slots: {
      header: 'action',
      default: ''
    }
  }
])
const sonBtnCloseClick = (e) => {
  drawerConfig.showAddressDrawer = e
  getAddress()
}
const onNewAddress = (row = {}, type) => {
  drawerConfig.showAddressDrawer = true
  drawerConfig.drawerInfo.title = type === 'add' ? t('keys.add_new_address') : t('keys.edit_address')
  drawerConfig.drawerInfo.row = row
  drawerConfig.drawerInfo.type = type
}
// 获取地址管理列表
const getAddress = async () => {
  const { code, data } = await getAddressApi()
  if (code === ERR_OK) {
    list.value = data
  }
}
// 删除该地址
const delAddress = (row) => {
  ElMessageBox.confirm(t('keys.Delete_this_address'), t('keys.tips'), {
    confirmButtonText: t('keys.confirm'),
    cancelButtonText: t('keys.cancel'),
    type: 'warning'
  })
    .then(async () => {
      const params = [row.id]
      const { code, data } = await delAddressApi(params)
      if (code === ERR_OK) {
        ElMessage({
          type: 'success',
          message: t('keys.address_was_successfully_deleted')
        })
        getAddress()
      }
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: t('keys.canceled')
      })
    })
}
// 设置默认发票
const postAddressdefultInvoice = async (row) => {
  const params = { addressId: row.id }
  const { code } = await postAddressdefultInvoiceApi(params)
  if (code === ERR_OK) {
    ElMessage({
      message: t('keys.Setting_succeeded'),
      type: 'success'
    })
    getAddress()
  }
}
// 设置默认收货地址
const postAddressDefultReceive = async (row) => {
  const params = { addressId: row.id }
  const { code } = await postAddressDefultReceiveApi(params)
  if (code === ERR_OK) {
    ElMessage({
      message: t('keys.Setting_succeeded'),
      type: 'success'
    })
    getAddress()
  }
}
onMounted(() => {
  getAddress()
})
</script>

<style lang="scss" scoped>
.header-btn {
  padding: 0 0 16px 0;
  display: flex;
  align-items: center;
  .len {
    margin-left: 12px;
    font-size: 14px;
    font-weight: 400;
    color: #333333;
    line-height: 22px;
  }
}
.card-box {
  display: flex;
  flex-wrap: wrap;
  :deep(.el-card) {
    width: calc(100% / 3 - 20px);
    min-width: 380px;
    margin-right: 16px;
    margin-bottom: 16px;
    .el-card__body {
      padding: 12px 16px;
      .header {
        display: flex;
        align-items: center;
        margin-bottom: 12px;
        position: relative;
        .title {
          max-width: 70%;
          height: 24px;
          font-size: 16px;
          font-weight: 550;
          color: #333333;
          line-height: 24px;
          align-items: center;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 1;
          -webkit-box-orient: vertical;
        }
        .tabColor {
          background: #e8f7ff;
          color: #0066ff;
          border: none;
        }
        .btn {
          position: absolute;
          font-weight: 600;
          right: 0px;
          top: 6px;
          font-size: 16px;
          cursor: pointer;
          :deep(.el-descriptions__cell) {
            padding-bottom: 8px;
          }
        }
      }
      .my-label {
        font-size: 14px;
        font-weight: 400;
        color: #666666;
        line-height: 22px;
      }
      .my-content {
        font-size: 14px;
        font-weight: 400;
        color: #333333;
        line-height: 22px;
      }
      .role {
        display: inline-block;
        i {
          display: flex;
          align-items: center;
          font-style: initial;
          margin-bottom: 4px;
        }
      }
    }
  }
}
:deep(.el-descriptions) {
  border-bottom: 1px solid #ebebeb;
  margin-bottom: 12px;
  &:last-child {
    border: 0;
    margin-bottom: 0;
  }
}
.mr-8 {
  margin-right: 8px;
}

.ml-8 {
  margin-left: 8px;
}
</style>
